<script>
    import modal from '@/mixins/modal'
    export default {
        name: 'ResourceFormModal',
        data () {
            return {
              permission:[]
            }
        },
        mixins:[modal],
        computed: {
          formItem () {
            return {pid:1, pids:'0/1/', menuType:'3', ...this.row, hasPermission:this.row.hasPermission ? this.row.hasPermission.split(",") : Array.of('1','2','3','4'), weight:this.row.weight ? Number(this.row.weight): 1}
          }
        },
        methods: {
          showModelHandler() {
            this.dispatch(`${this.namespace}/fetchPermission`).then(response => {
              if(response) {
                const {data, httpCode, msg} = response
                if(httpCode === 200) {
                  this.show = true
                  this.permission =data
                } else {
                  this.$Message.error(msg || '操作失败');
                }
              }
            })
          },
          onHandler() {
            const param = {...this.formItem, hasPermission:this.formItem.hasPermission.join(",")}
            const formData = this.option === 'create' ? { ...param, pid: this.formItem.id || 1, pids: this.formItem.id ? this.formItem.pids + this.formItem.id  + '/' : this.formItem.pids, id: null } : param;
            delete formData.children
            this.onSubmit(formData)
          },
          onSubmit(param) {
              this.$Modal.confirm({
                title: '操作提示',
                content: this.content,
                onOk: () => {
                  this.loading = true
                  this.dispatch(this.requestUrl, param).then((response) => {
                    if (response) {
                      const { data, httpCode, msg } = response
                      if (httpCode == 200) {
                        this.show = false;
                        this.dispatch(this.reloadUrl)
                      } else {
                        this.$Message.error(msg || '操作失败')
                      }
                    }
                    this.loading = false
                  })
                },
                onCancel: () => {
                  this.loading = false
                }
              });
            }
          },
    }
</script>
<template>
    <span>
        <IButton click @click="showModelHandler" :type="type" :icon="icon" :perm="perm" :size="size">
          <slot></slot>
        </IButton>
        <Modal
            v-model="show"
            :title="title"
            :width="560">
            <Form :model="formItem" :label-width="80">
              <Form-item label="资源名称" prop="name">
                  <Input v-model="formItem.name" placeholder="请输入权限名称"></Input>
              </Form-item>
              <Form-item label="权重和类型">
                <Row>
                    <Col span="11">
                        <Input-number :min="1" v-model="formItem.weight"></Input-number>
                    </Col>
                    <Col span="13">
                        <Select v-model="formItem.menuType">
                            <Option value="1">父子类型</Option>
                            <Option value="2">分组类型</Option>
                            <Option value="3">普通类型</Option>
                        </Select>
                    </Col>
                </Row>
              </Form-item>
              <Form-item label="资源标识" prop="identity">
                  <Input v-model="formItem.identity" placeholder="请输入权限标识"></Input>
              </Form-item>
              <Form-item label="资源图标" prop="icon">
                  <Input v-model="formItem.icon" placeholder="请输入权限标识"></Input>
              </Form-item>
              <Form-item label="资源链接" prop="url">
                  <Input v-model="formItem.url" placeholder="请输入权限标识"></Input>
              </Form-item>
              <Form-item label="资源权限" prop="hasPermission">
                  <Select v-model="formItem.hasPermission" multiple>
                      <Option v-for="p in permission" :value="p.id" :key="p.id">{{p.name}}</Option>
                  </Select>
              </Form-item>
            </Form>
            <div slot="footer">
                <Button type="text" @click="show = false">取消</Button>
                <Button type="primary" :loading="loading" @click="onHandler">{{loading ? '拼命中...' :'确定'}}</Button>
            </div>
        </Modal>
    </span>
</template>
